<template>
  <div class="splash-container">
    <div class="splash-logo">
      <i class="fas fa-paw splash-icon"></i>
    </div>
    
    <h1 class="splash-title">宠物乐园</h1>
    <p class="splash-subtitle">您的宠物生活好伙伴</p>
    
    <div class="loading">
      <div class="loading-bar"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'SplashView',
  setup() {
    const router = useRouter();
    
    onMounted(() => {
      // 检查是否是第一次访问
      const hasVisited = localStorage.getItem('hasVisited');
      
      if (hasVisited) {
        // 不是第一次访问，直接跳转到首页
        router.replace('/home');
      } else {
        // 是第一次访问，设置访问标记
        localStorage.setItem('hasVisited', 'true');
        
        // 3秒后跳转到首页
        setTimeout(() => {
          router.push('/home');
        }, 3000);
      }
    });
    
    return {};
  }
});
</script>

<style scoped>
.splash-container {
  background: linear-gradient(to bottom, #3490dc, #6574cd);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 0;
  margin: 0;
}

.splash-logo {
  width: 150px;
  height: 150px;
  background-color: white;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  margin-bottom: 30px;
}

.splash-icon {
  font-size: 80px;
  color: #3490dc;
}

.splash-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.splash-subtitle {
  font-size: 16px;
  margin-bottom: 50px;
  opacity: 0.8;
}

.loading {
  width: 200px;
  height: 5px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background-color: white;
  border-radius: 10px;
  animation: loading 2s infinite;
}

@keyframes loading {
  0% { left: -30%; }
  100% { left: 100%; }
}
</style> 